<template>
	<!-- <div class="checked"><a-checkbox v-model="isChecked" />显示机会更新动态 </div> -->
	<div class="tab-1 mt-10">
		<div v-for="item in dataList" :key="item.id" class="item">
			<div class="date">{{ item.month }}</div>
			<div class="list">
				<div class="list-bg"></div>
				<div class="list-box">
					<div class="bg"></div>
					<div class="items" v-for="child in item?.list" :key="child.id">
						<ComIcon :icon="SelectInfo(logType, child.logType, 'icon')" :size="14"></ComIcon>
						<div class="date">{{ $t("customer.about") }}{{ getDateDiff(child.createTime) }}</div>
						<div class="text flex">
							{{ child.creatorName }}&nbsp;{{ SelectInfo(logType, child.logType) }}&nbsp;
							<p v-if="[1, 2].includes(child.logType)">{{ child.key }}</p>
							<span v-else>{{ child.key }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { logList } from "@/api/customerManage/customer";
import { logType } from "@/utils/filter";
import { SelectInfo, getDateDiff } from "@/utils";
const props = defineProps({
	customerId: {
		type: String,
		default: ""
	}
});
const isChecked = ref(false);
const dataList = ref([]);
const getList = async () => {
	const data = await logList({ mainId: props.customerId });
	dataList.value = data;
};
onMounted(() => {
	getList();
});
</script>

<style scoped lang="scss">
.items {
	&::before {
		content: "";
		display: block;
		position: absolute;
		// left: -28%;
		left: -28px;
		top: 65%;
		width: 1px;
		height: 50%;
		background-color: #e8e8e8;
	}
	&:last-child {
		&::before {
			display: none;
		}
	}
}
</style>
